<template>
  <div class="form-input-area">
    <Lodding :loading="loading" />
    <div class="flx-row-s-s div-line" style="margin-top: 20px">
      <div class="flx-col-s-s">
        <div class="long-name long-name-nece-before">您要解析的域名</div>
        <div class="style-contnent c-r">
          （格式：域名|主机记录|记录类型|线路类型|记录值|MX优先级|TLL）
        </div>
      </div>
      <div style="width: 600px; position: relative">
        <Input
          v-model="dnText"
          wrap="hard"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 10 }"
          placeholder="每行一个域名，最多一次性解析500个，单行域名格式为：域名|主机记录|记录类型|线路类型|记录值|MX优先级|TLL，例如：a.com|www|A|默认|127.0.0.1|1|600"
          @on-keyup="getDNNumber"
          @on-blur="getAvailableDN"
        />
        <span class="c-g number-tips">{{ dnNumber }}/500</span>
      </div>
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">手机号码</div>
      <span class="c-d2 f-14">{{ mobile }}</span>
      <div
        class="user-normal-button form-button-size"
        style="margin-left: 10px"
        @click="getCodeEvent"
      >
        {{ senCodeText }}
      </div>
      <span
        class="c-black f-14"
        style="padding: 10px 0; box-sizing: border-box; margin-left: 20px"
        >若手机号已停用无法收到短信，请联系在线客服!</span
      >
    </div>
    <div class="flx-row-s-c div-line long-name-nece">
      <div class="long-name">短信验证码</div>
      <Input v-model.trim="smsCode" style="width: 100px" />
    </div>
    <div
      class="user-strong-button submit-button-style submit-button-style-first"
      style="margin-top: 15px"
      @click="submit"
    >
      确认
    </div>
    <analysisResultModal
      title="域名解析结果"
      :show.sync="resultModalShow"
      :suc-list="resultList"
    ></analysisResultModal>
  </div>
</template>
<script>
import { debounce, trimStr } from "@/utils/format";
import { sendCode } from "@/api/user";
import { seniorAnalysis } from "@/api/bidding";
import Lodding from "_c/spin/loading";

export default {
  name: "VipSeniorAnalysisForm",
  components: {
    Lodding,
    analysisResultModal: () =>
      import("_c/modal/analysisResultModal/analysisResultModal.vue"),
  },
  data() {
    return {
      loading: false,
      dnText: "",
      dnNumber: 0,
      dnSet: new Set(),
      // 备注
      remark: "",
      // 短信验证码
      smsCode: "",
      isSendCode: false,
      senCodeText: "获取短信验证码",
      // 结果数据
      resultModalShow: false,
      resultList: [],
    };
  },
  // a.com|www|A|默认|127.0.0.1|600
  computed: {
    mobile() {
      return this.$store.state.user.mobile;
    },
  },
  methods: {
    // 函数防抖获取输入框中的域名
    getDNNumber: debounce(function () {
      const temp = this.dnText.split("\n");
      this.dnNumber = temp.filter((item) => {
        return !item.match(/^[ ]*$/);
      }).length;
    }, 200),
    // 筛选出有用域名
    getAvailableDN() {
      const temp = this.dnText.split("\n").filter((item) => {
        return !item.match(/^[ ]*$/);
      });
      const dnList = temp.map((item) => trimStr(item));
      this.dnSet = new Set(dnList);
      this.$storage.setPushSelectDomian([...this.dnSet]);
      this.dnText = [...this.dnSet].join("\n");
      this.dnNumber = this.dnSet.size;
    },
    // 获取短信验证吗
    async getCodeEvent() {
      if (!this.isSendCode) {
        let count = 60;
        this.isSendCode = true;
        this.showLoading = true;
        const { code } = await sendCode();
        this.showLoading = false;
        if (code === 200) {
          this.smsInterval = setInterval(() => {
            count -= 1;
            this.senCodeText = `${count}s后重新发送`;
            if (count === 0) {
              this.isSendCode = false;
              this.senCodeText = "重新发送";
              this.smsInterval && clearInterval(this.smsInterval);
            }
          }, 1000);
        } else {
          this.isSendCode = false;
        }
      }
    },
    submit() {
      if (this.dnText === "") {
        this.$Message.warning("请输入域名!");
        return false;
      }
      if (!this.smsCode) {
        this.$Message.warning("请输入验证码!");
        return false;
      }
      this.seniorAnalysis();
    },
    async seniorAnalysis() {
      this.showLoading = true;
      const params = {};
      params.recordList = this.dnText.split("\n");
      params.code = this.smsCode;
      const { code, data } = await seniorAnalysis(params);
      this.showLoading = false;
      if (code === 200) {
        this.resultList = data;
        this.resultModalShow = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.number-tips {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.style-contnent {
  text-align: right;
  width: 140px;
  font-size: 14px;
  line-height: 32px;
}
.long-name {
  min-width: 135px;
}
.submit-button-style-first {
  margin-left: 165px;
}
</style>
